import React, {Component} from 'react';
import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native';
import ListItem from './ListItem';
//掠影页面
let pageNo = 1;//当前第几页
export default class Watch extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      refreshing: false,
    };
  }
  render() {
    if (!this.state.data) {
      return (<View style={styles.container}>
        <ActivityIndicator
          animating={true}
          color='red'
          size="large"
        />
      </View>);
    }
    return (
      <FlatList
        data={this.state.data}
        onEndReached={this._onEndReached.bind(this)}
        renderItem={({ item }) => {
            return <ListItem data={item} navigation={this.props.navigation} name = "师大观澜"/>
         }
        }
        ItemSeparatorComponent={() => <View style={{ height: 1, backgroundColor: '#DDD' }}  />}
        onEndReachedThreshold={0.1}
        onRefresh={this._renderRefresh.bind(this)}
        refreshing={this.state.refreshing}
      />
    );
  }
  //请求数据
  getDataFromApiAsync(page) {
    var body = new FormData();
    body.append("page", page);
    body.append("type", "4");
    fetch('http://eai.datamorality.com/snnuapp/api/article/list', {
      method: 'POST',
      body: body
    })
      .then((response) => response.json())
      .then((responseJson) => {
        if (page == 1) {
          this.setState({
            data: responseJson.d.lists,
          });
        } else {
          this.setState({
            data: this.state.data.concat(responseJson.d.lists),
          });
        }
      })
      .catch((error) => {
        console.error(error);
      });
  }
  componentDidMount() {
    this.getDataFromApiAsync(pageNo);
  }
  //上拉刷新
  _onEndReached() {
    pageNo++;
    //获取数据
    this.getDataFromApiAsync(pageNo);
  }
  //下拉刷新
  _renderRefresh() {
    pageNo = 1;
    //获取数据
    this.getDataFromApiAsync(pageNo);
  }

}

const styles = StyleSheet.create({
  item_text: {
    flex: 1,
    fontSize: 16,
    color: '#000000',
    padding: 10,
    marginTop: 5
  },
  transverse: {
    flexDirection: 'row',
    paddingLeft: 10,
    paddingRight: 10
  },
  image_style: {
    flex: 1,
    height: 100,
    marginLeft: 10
  },
  instructions: {
    textAlign: 'center',
    color: '#FF0000',
    marginBottom: 5,
  },
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});
